<template>
  <div style="padding: 10px">
    <div style="margin: 50px auto; text-align: center">
      <img
        src="/src/assets/home2.png"
        alt="logo"
        title="logo"
        style="height: 500px"
      />
    </div>
    <div style="margin: 0 auto; text-align: center">
      <div style="margin: 10px">
        <a-typography-title :level="1">欢迎您，EBC管理员</a-typography-title>
      </div>
    </div>
    <div class="container">
      <a-divider
        ><a-typography-title :level="3"
          >系统运行情况</a-typography-title
        ></a-divider
      >
    </div>

    <div class="container">
      <a-row>
        <a-col span="2"></a-col>
        <a-col span="4">
          <a-card :bordered="false">
            <div style="margin: 0 auto; text-align: center">
              <a-typography-title :level="2">100位</a-typography-title>
              <a-divider />
              <a-typography-title :level="4"
                ><UsergroupAddOutlined /> &nbsp;
                注册用户数量</a-typography-title
              >
            </div>
          </a-card>
        </a-col>
        <a-col span="4"></a-col>
        <a-col span="4">
          <a-card :bordered="false">
            <div style="margin: 0 auto; text-align: center">
              <a-typography-title :level="2">100个</a-typography-title>
              <a-divider />
              <a-typography-title :level="4"
                ><PartitionOutlined /> &nbsp;
                完成交易撮合数量</a-typography-title
              >
            </div>
          </a-card>
        </a-col>
        <a-col span="4"></a-col>
        <a-col span="4">
          <a-card :bordered="false">
            <div style="margin: 0 auto; text-align: center">
              <a-typography-title :level="2">100天</a-typography-title>
              <a-divider />
              <a-typography-title :level="4"
                ><HistoryOutlined /> &nbsp; 系统平稳运行天数</a-typography-title
              >
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <div class="container">
      <a-divider
        ><a-typography-title :level="3">交易情况</a-typography-title></a-divider
      >
    </div>
    <div style="margin: 0 auto; text-align: center">
      <div ref="chart1" style="width: 100%; height: 500px"></div>
      <a-divider />
      <div ref="chart2" style="width: 100%; height: 500px"></div>
    </div>
  </div>
</template>
<script>
// 引入echarts
import * as echarts from "echarts";
import { onMounted } from "vue";
import { reactive, ref } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import { get, del, post, getBlob, tip, removeLocalToken, ddo } from "@/common";
import {
  UsergroupAddOutlined,
  PartitionOutlined,
  HistoryOutlined,
} from "@ant-design/icons-vue";

export default {
  components: {
    UsergroupAddOutlined,
    PartitionOutlined,
    HistoryOutlined,
  },
  setup() {
    const checked1=ref(false);
    const checked2=ref(false);
    const give=()=>{
      console.log(checked1.value);
    }
    return {
      checked1,
      checked2,
      give
    };
  },

  setup() {
    const state = reactive({
      //创建响应式数据对象和相关数据
      id: 1,
      chart1: ref(),
      chart2: ref(),
      chart3: ref(),
      chart4: ref(),
      data1: ref([]),
      data2: ref([]),
      data3: ref([]),
      data4: ref([]),
    });

    const init = () => {
      //定义方法
      if (state.chart1) {
        //图标初始化
        var myChart = echarts.init(state.chart1);
        const option1 = {
          title: {
            text: "撮合交易总量情况",
            left: "center",
          },
          toolbox: {
            left: "80%",
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false, title: "查看源数据" },
              saveAsImage: { show: true, title: "另存为图片" },
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          xAxis: {
            boundaryGap: false,
            type: "category",
            data: [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: state.data1,
              type: "line",
            },
          ],
        };
        //指定配置项与数据显示
        myChart.setOption(option1);
      }
      if (state.chart2) {
        //图标初始化
        var myChart = echarts.init(state.chart2);
        const option2 = {
          title: {
            text: "成交价情况",
            left: "center",
          },
          toolbox: {
            left: "80%",
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false, title: "查看源数据" },
              saveAsImage: { show: true, title: "另存为图片" },
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            data: ["最高成交价", "最低成交价", "平均成交价"],
            left: 10,
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
              "0",
              "1",
              "2",
              "3",
              "4",
              "5",
              "6",
              "7",
              "8",
              "9",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "最高成交价",
              data: state.data2,
              type: "line",
            },
            {
              name: "最低成交价",
              data: state.data3,
              type: "line",
            },
            {
              name: "平均成交价",
              data: state.data4,
              type: "line",
            },
          ],
        };
        //指定配置项与数据显示
        myChart.setOption(option2);
      }
    };
    // 生命周期函数
    onMounted(() => {
      getReportData(),
      init()
    });
    const getReportData = () => {
      get("/trade/tradeInfo/getTimeSlot").then((res) => {
        console.log(res);
        state.data1 = res.data.tradingVolumes;
        state.data2 = res.data.maxPrices;
        state.data3 = res.data.minPrices;
        state.data4 = res.data.averagePrices;
        init();
      });
    };
    return state;
  },
};
</script>
<style>
.div-inline {
  display: inline;
}
.container {
  margin: 50px 0px;
}
</style>